import { useRef, useState, useEffect, lazy, Suspense } from 'react'
import { Form, Input, Select, Button, message } from 'antd'
import { DownloadOutlined } from '@ant-design/icons'
import {useSelector} from 'react-redux'
import LdPrintTable from '../../../../components/LdPrintTable'
import { secretOptions } from "../../../../utils/constant";
import bus from '../../../../utils/eventBus';
import './index.scss'
const CarrierLogView = lazy(() => import('../CloneLog/CloneLogView'))
const CarrierLog = () => {
    const { id = ''} = useSelector((state: any) => state.userReducer.userInfo)
    const formRef = useRef<any>(null)
    const options = useRef<any[]>([
        { label: '全部', value: 2 },
        { label: '使用中', value: 1 },
        { label: '已回收', value: 0 }
    ])
    const pageConfig = useRef<{ currentPage: number, total: number, pageSize: number }>({
        currentPage: 1,
        total: 0,
        pageSize: 10
    })
    const [data, setData] = useState<any[]>()
    const [multipleSelection, setMultipleSelection] = useState<any[]>([])
    const detailRow = useRef<any>(null)
    const [showDetail, setShowDetail] = useState<boolean>(false)
    const columns = useRef<any[]>([
        { key: 'sn', dataIndex: 'sn', title: '标识', ellipsis: true },
        { key: 'fileTitle', dataIndex: 'fileTitle', title: '标题', ellipsis: true },
        { key: 'oper', dataIndex: 'oper', title: '责任人', width: 80, ellipsis: true },
        {
            key: 'fileLevel',
            dataIndex: "fileLevel",
            title: '密级',
            width: 50,
            render: (_: any, record: any) => {
                return (
                    <>{getFileLevel(record.fileLevel)}</>
                )
            }
        },
        {
            key: 'page',
            dataIndex: 'page',
            title: '页数',
            width: 50,
        },
        {
            key: 'fileCreateTime',
            dataIndex: 'fileCreateTime',
            width: 150,
            title: '完成时间',
        },
        {
            key: 'status',
            dataIndex: 'status',
            width: 65,
            title: '状态',
            render: (_: any, record: any) => {
                return (
                    <>{getStatus(record.fileStatus)}</>
                )
            }
        },
        {
            key: 'action',
            dataIndex: 'action',
            title: '操作',
            width: 50,
            render: (_: any, record: any) => {
                return (
                    <>
                        <Button type="link" style={{ fontSize: '14px', padding: 0 }} onClick={() => handleViewDetail(record)}>详情</Button>
                    </>
                )
            }
        }
    ])
    const handleViewDetail = (row: any) => {
        detailRow.current = row;
        setShowDetail(true)
    }
    const getFileLevel = (val: number | string) => {
        const data = [...secretOptions]
        return data.find((item) => item.value === val)?.label;
    }
    const getStatus = (val: number) => {
        return val === 1 ? "使用中" : val === 2 ? "全部" : "已回收";
    }
    const exportCloneLogFinished = (data: any) => {
        if (data.code === 200) {
            message.success(data.msg);
        } else {
            message.error(data.msg);
        }
    }
    const handlePage = (page: any) => {
        pageConfig.current = { ...pageConfig.current, ...page }
        loadData()
    }
    const handleExport = () => {
        const data = {
            data: multipleSelection,
            ...formRef.current.getFieldsValue()
        }
        window.chromePro.exportPrintLog(
            JSON.stringify(data)
        );
    }
    const selectRowChange = (val: Array<any>) => {
        setMultipleSelection(val)
    }
    const getCarrierLogFinished = (data: any) => {
        if (data.code === 200) {
            setData(data.data)
            pageConfig.current = { ...pageConfig.current, total: data.total }
        } else {
            message.error(data.msg);
        }
    }
    const loadData = () => {
        const params = {
            ...pageConfig.current,
            ...formRef.current.getFieldsValue(),
            type: 1,
            responsible: id,
        }
        window.chromePro.getCarrierLog(
            JSON.stringify(params)
        );
    }
    const formChange = () => {
        pageConfig.current = { ...pageConfig.current, currentPage: 1 }
        loadData()
    }
    const handleClose = () => {
        setShowDetail(false)
    }
    useEffect(() => {
        formRef.current.setFieldsValue({
            fileStatus: 2
        })
        bus.addListener("getCarrierLogFinished", getCarrierLogFinished);
        bus.addListener("exportPrintLogFinished", exportCloneLogFinished);
        loadData();
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("exportPrintLogFinished", exportCloneLogFinished);
            bus.removeListener("getCarrierLogFinished", getCarrierLogFinished);
        }
    }, [])
    return (
        <>
            <div className="h100 w100">
                <div className="filter flex-between mb-10">
                    <Form ref={formRef} layout="inline" onValuesChange={formChange}>
                        <Form.Item name="keyword">
                            <Input placeholder="请输入关键字检索" v-model="params.keyword" style={{ width: "240px" }}
                                className="custom-input" allowClear>
                            </Input>
                        </Form.Item>
                        <Form.Item name="fileStatus" style={{marginLeft:'10px'}}>
                            <Select style={{ width: '120px' }} placeholder="请选择状态" options={options.current}></Select>
                        </Form.Item>
                    </Form>
                    <Button onClick={handleExport} icon={<DownloadOutlined />} type="primary" className="exportBtn">导出</Button>
                </div>
                <div style={{ height: 'calc(100% - 42px)' }}>
                    <LdPrintTable handlePage={handlePage} selectRowChange={selectRowChange} data={data} columns={columns.current} pageConfig={pageConfig.current}></LdPrintTable>
                </div>
            </div>
            <Suspense>
                {
                    showDetail ? <CarrierLogView title={'打印日志详情'} detailRow={detailRow.current} onClose={handleClose} /> : null
                }
            </Suspense>
        </>
    )
}
export default CarrierLog